<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            margin: 30px;
        }
        .box img{
            width: 400px;
            height: 400px;
        }
        .smallList {
            display: flex;
        }
        .smallList img {
            width: 60px;
            height: 60px;
            margin: 10px;
        }
    </style>
</head>
<body>

    <div class="box">
        <img src="../images/6.jpg" alt="">
    </div>
    <ul class="smallList">
        <!-- <li>
            <img src="../images/6.jpg" alt="">
        </li>
        <li>
            <img src="../images/6.jpg" alt="">
        </li>
        <li>
            <img src="../images/6.jpg" alt="">
        </li>
        <li>
            <img src="../images/6.jpg" alt="">
        </li> -->
    </ul>


    <script>

        var smallImgArr = ['../images/girlsmall1.jpg' , '../images/girlsmall2.jpg' , '../images/girlsmall3.jpg' , '../images/girlsmall4.jpg'] ;
        var bigImgArr = ['../images/girlbig1.jpg' , '../images/girlbig2.jpg' , '../images/girlbig3.jpg' , '../images/girlbig4.jpg'] ;


        // 页面打开的时候  默认显示第一张大图 ， 显示所有的小图
        // 切换图片  就是改变大图的路径



        var oBigImg = document.querySelector('.box img') ;
        var oUl = document.querySelector('.smallList') ;

        // 显示第一张大图
        oBigImg.src = bigImgArr[0] ;
        
        // 显示所有小图
        var html = '' ;
        for(var i = 0 ; i < smallImgArr.length ; i++) {
            html += `
                <li>
                    <img index="${i}" src="${smallImgArr[i]}" alt="">
                </li>
            `
        }

        oUl.innerHTML = html ;    // html实际上是一个字符串
        // oUl.appendChild(html) ;   // 报错，只有标签才可以使用appendChild这个方法



        oUl.onmouseover = function(e) {
            var e = e || event ;
            var target = e.target || e.srcElement ;
            // 标签名大写
            if(target.tagName === 'IMG') {
                // console.log(333);
                // 判断当前摸的是第一张
                var j = target.getAttribute('index') ;
                oBigImg.src = bigImgArr[j] ;
            }
        }

    </script>
    
</body>
</html>